<template>
  <div class="package-container">
    <h2 class="page-title">体检套餐列表</h2>

    <div class="package-list">
      <el-card v-for="pkg in packages"
               :key="pkg.packageId"
               class="package-card">
        <div class="package-info">
          <div class="package-main">
            <h3 class="package-name">{{ pkg.packageName }}</h3>
            <div class="package-price">￥{{ pkg.price.toFixed(2) }}</div>
          </div>
          <div class="package-actions">
            <el-button
              type="primary"
              @click="viewDetail(pkg.packageId)"
              class="detail-btn">
              查看详情
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <el-loading text="加载中..."/>
    </div>

    <!-- 错误提示 -->
    <el-alert
      v-if="error"
      :title="error"
      type="error"
      show-icon
      center
      class="error-alert"/>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { queryAll } from '@/api/medicalPackages'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 检查是否是管理员
const isAdmin = userStore.hasRole('user')
const router = useRouter()
const packages = ref([])
const loading = ref(false)
const error = ref('')
console.log(isAdmin)
// 获取套餐列表
const fetchPackages = async () => {
  loading.value = true
  error.value = ''

  try {
    const res = await queryAll()
    if (res.code === 1 && res.msg === 'Success') {
      packages.value = res.data
    } else {
      error.value = '获取套餐列表失败'
    }
  } catch (err) {
    error.value = '获取套餐列表失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 查看详情
const viewDetail = (packageId: number) => {
  router.push({
    name: 'package-detail',
    params: { id: packageId }
  })
}

onMounted(() => {
  fetchPackages()
})
</script>

<style scoped>
.package-container {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.package-card {
  transition: transform 0.2s ease;
}

.package-card:hover {
  transform: translateX(5px);
}

.package-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
}

.package-main {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.package-name {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
  min-width: 200px;
}

.package-price {
  font-size: 1.5rem;
  color: #f56c6c;
  font-weight: bold;
}

.package-actions {
  display: flex;
  align-items: center;
}

.detail-btn {
  min-width: 100px;
}

.loading {
  text-align: center;
  padding: 2rem;
}

.error-alert {
  margin: 2rem auto;
  max-width: 500px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .package-container {
    padding: 1rem;
  }

  .package-info {
    flex-direction: column;
    gap: 1rem;
  }

  .package-main {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .package-name {
    min-width: unset;
  }
}

/* 暗色主题 */
@media (prefers-color-scheme: white) {
  .page-title {
    color: #ffffff;
  }

  .package-name {
    color: #ffffff;
  }

  .price {
    color: #ff7875;
  }
}
</style>
